<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    .w {
      width: 1200px;
      margin: 20px auto;
    }

    .container {
      width: 1200px;
      height: 600px;
      margin: 20px auto;
      /* background-color: pink; */
    }

    .container .small {
      position: relative;
      float: left;
      border: 1px solid #ccc;
      margin-right: 10px;
    }

    .container .small img {
      display: block;
    }

    .container .small .mask {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 300px;
      height: 300px;
      background-color: #ffefa7;
      opacity: 0.7;
      cursor: move;
    }

    .container .big {
      position: relative;
      float: left;
      width: 600px;
      height: 500px;
      border: 1px solid #ccc;
      overflow: hidden;
    }

    .container .big .bigImg {
      position: absolute;
    }

    .hide {
      display: none;
    }
  </style>
</head>

<body>
  <div>
    <div class="container">
      <div class="small">
        <img src="./img/small.jpg" alt="" />
        <!-- 遮盖 -->
        <div class="mask hide"></div>
      </div>
      <div class="big hide">
        <img src="./img/big.jpg" class="bigImg" alt="" />
      </div>
    </div>
  </div>

  <script>
    var smallBox = document.querySelector('.small')
    var mask = document.querySelector('.mask')
    var bigBox = document.querySelector('.big')
    var bigImg = document.querySelector('.bigImg')

    // 1. 给小图容器绑定鼠标悬浮和离开.
    smallBox.onmouseenter = function () {
      console.log('enter');
      // 让遮盖和大图容器显示
      mask.classList.remove('hide')
      bigBox.classList.remove('hide')
    }

    smallBox.onmouseleave = function () {
      console.log('leave');
      // 让遮盖和大图容器隐藏
      mask.classList.add('hide')
      bigBox.classList.add('hide')
    }

    // 2. 给小图容器绑定鼠标移动事件
    smallBox.onmousemove = function (event) {
      var maskMoveLeft = event.clientX - mask.offsetWidth / 2 - smallBox.getBoundingClientRect().left;
      var maskMoveTop = event.clientY - mask.offsetHeight / 2 - smallBox.getBoundingClientRect().top;


      // 判断是否遮盖越界
      if (maskMoveLeft < 0) {
        maskMoveLeft = 0 // 限制不能出小图片容器左边
      }

      if (maskMoveTop < 0) {
        maskMoveTop = 0 // 限制不能出小图片容器上边
      }

      // 得到遮盖最大的移动距离x和y
      // 遮盖最大的移动距离x = 小盒子宽度clientWidth - 遮盖的宽度（offsetWidth）
      var maskMaxMoveLeft = smallBox.clientWidth - mask.offsetWidth;
      var maskMaxMoveTop = smallBox.clientHeight - mask.offsetHeight;

      if (maskMoveLeft > maskMaxMoveLeft) {
        maskMoveLeft = maskMaxMoveLeft // 限制不能出小图片容器右边，让其贴在右边
      }

      if (maskMoveTop > maskMaxMoveTop) {
        maskMoveTop = maskMaxMoveTop // 限制不能出小图片容器右边，让其贴在下边
      }


      mask.style.left = maskMoveLeft + 'px'
      mask.style.top = maskMoveTop + 'px'

      // 让大图也要移动，移动是有比例关系的
      // 遮盖的移动距离（已知） / 遮盖最大的移动距离（已知） = 大图的移动距离（未知） / 大图最大移动距离（未知）
      // 大图最大移动距离（未知） = 大图片宽度 - 大图容器的宽度
      var bigImgMaxMoveLeft = bigImg.clientWidth - bigBox.offsetWidth;
      var bigImgMaxMoveTop = bigImg.clientHeight - bigBox.offsetHeight;

      // 大图的移动距离left =  (遮盖的移动距离 *  大图最大移动距离) / 遮盖最大的移动距离
      var bigImgMoveLeft = (maskMoveLeft * bigImgMaxMoveLeft) / maskMaxMoveLeft
      var bigImgMoveTop = (maskMoveTop * bigImgMaxMoveTop) / maskMaxMoveTop


      // 赋值给大图片left和top即可
      bigImg.style.left = -bigImgMoveLeft + 'px'
      bigImg.style.top = -bigImgMoveTop + 'px'

    }

  </script>
</body>

</html>